import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import Header from '@/commonComponents/header/Header';
import CitySelector from '@/commonComponents/citySelector/index';
import { Calendar, Dialog } from 'antd-mobile';
import DepartDate from './components/departDate/DepartDate';
import HighSpeed from './components/highSpeed/HighSpeed';
import Journey from './components/journey/Journey';
import Submit from './components/submit/Submit';
import Swipe from './components/swipe/index';
import Travel from './components/travel/index';
import Bottom from '@/commonComponents/bottom/index';
import { journeyInitState, journeyReducer } from './reducer';
import { getToken } from '../../utils/localStorge';
import './index.module.scss';

const { memo, useReducer, useState, useEffect } = React;
const min = new Date();
const max = new Date();
max.setDate(max.getDate() + 7);
function Index() {
  const [journeyState, dispatch] = useReducer(journeyReducer, journeyInitState);
  const [showCitySelector, setShowCitySelector] = useState({
    show: false,
    currentDir: 'left',
  });
  const token = getToken();
  const [departDate, setDepartDate] = useState<number>(Date.now());
  const [isDateSelectorVisible, setIsDateSelectorVisible] = useState(false);
  const [highSpeed, setHighSpeed] = useState(false);
  const handleExChange = () => {
    dispatch({
      type: 'exChange',
    });
  };
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const city: string = (window as any).currentCity;
  useEffect(() => {
    if (city) {
      dispatch({
        type: 'changeFrom',
        payload: city,
      });
    }
  }, [city]);

  const onSelect = (val: string) => {
    if (showCitySelector.currentDir === 'left') {
      dispatch({
        type: 'changeFrom',
        payload: val,
      });
    } else {
      dispatch({
        type: 'changeTo',
        payload: val,
      });
    }
    setShowCitySelector({
      ...showCitySelector,
      show: false,
    });
  };
  const navigate = useNavigate();
  const goQuery = () => {
    if (!token) {
      Dialog.confirm({
        content: '你还没有登录，是否前往登录？',
        onConfirm: async () => {
          navigate('/login');
        },
      });
      return;
    } else {
      navigate(
        `/query?from=${journeyState.from}&to=${journeyState.to}&highSpeed=${highSpeed}&date=${departDate}`
      );
    }
  };
  const selectDate = (val: Date | null) => {
    const time = val?.getTime();
    if (!time) {
      return;
    }
    setDepartDate(time);
    setIsDateSelectorVisible(false);
  };

  return (
    <div styleName="index-box">
      {!showCitySelector.show && (
        <div styleName="index-header" className="fn14">
          <Header title="火车票" />
          <div styleName="form1">
            <Journey
              from={journeyState.from}
              to={journeyState.to}
              exchangeFromTo={handleExChange}
              showCitySelector={setShowCitySelector}
            />
            <DepartDate
              time={departDate}
              onClick={() => setIsDateSelectorVisible(!isDateSelectorVisible)}
            />
            <HighSpeed highSpeed={highSpeed} toggle={setHighSpeed} />
            <Submit handleClick={goQuery} />
          </div>
        </div>
      )}
      <Swipe></Swipe>
      <div styleName="con-box" className="mgt10">
        <Travel></Travel>
      </div>
      <CitySelector
        show={showCitySelector.show}
        currentDir={showCitySelector.currentDir}
        onSelect={onSelect}
      />
      {/* <Logo styleName="icon"></Logo> */}
      {isDateSelectorVisible && (
        <div styleName="date-bottom-fixed">
          <Calendar
            selectionMode="single"
            prevMonthButton={<span>上一月</span>}
            nextMonthButton={<span>下一月</span>}
            value={new Date(departDate)}
            min={min}
            max={max}
            onChange={selectDate}
          />
        </div>
      )}
      <Bottom />
    </div>
  );
}

export default memo(Index);
